<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="../css/common.css" media="all" />
<link rel="stylesheet" type="text/css" href="../css/article.css" media="all" />
</head>
<body>
<div id="w3h_body">
  <div class="body_content">
    <!-- toc begin -->
    <h1 class="title">BT1025: IE 会忽略触发 hasLayout 的元素内尾部的全角空格</h1>
    <ul class="toc">
      <li><a href="#standard_reference">标准参考</a> <span>•</span></li>
      <li><a href="#description">问题描述</a> <span>•</span></li>
      <li><a href="#influence">造成的影响</a> <span>•</span></li>
      <li><a href="#impacted_browsers">受影响的浏览器</a> <span>•</span></li>
      <li><a href="#analysis_of_issues">问题分析</a> <span>•</span></li>
      <li><a href="#solutions">解决方案</a> <span>•</span></li>
      <li><a href="#see_also">参见</a></li>
    </ul>
    <!-- toc end -->
    <div id="w3h_content">
      <!-- content begin -->
      <address class="author">作者：陆远 孙东国</address>
      <h2 id="standard_reference">标准参考</h2>
      <p>无。</p>

      <h2 id="description">问题描述</h2>
      <p>对于全角空格，IE 中凡是会使该浏览器内 hasLayout 属性为 true 的元素内尾部的全角空格均会被忽略。</p>

      <h2 id="influence">造成的影响</h2>
      <p>这个现象会使元素的宽度在 IE 中由于全角空格被忽略而显得比其他浏览器更小，从而造成布局上的差异。</p>

      <h2 id="impacted_browsers">受影响的浏览器</h2>
      <table class="list">
        <tr>
          <th>IE6 IE7 IE8</th>
          <td>&nbsp;</td>
        </tr>
      </table>

      <h2 id="analysis_of_issues">问题分析</h2>
      <p>字符“　”，即全角空格，其Unicode编号为“U+3000”。IE 对这个符号有着特殊的处理。</p>
      <p>关于“空格”的更多信息，请参考 <a href="http://zh.wikipedia.org/zh-cn/空格">http://zh.wikipedia.org/zh-cn/空格</a>。</p>
      <p>IE 中凡是会使该浏览器内 hasLayout 属性为 true 的元素内尾部的全角空格均会被忽略。</p>
      <p>分析以下代码：</p>
      <pre>&lt;body style="font-size:12px; margin:20px;"&gt;
&lt;table border='1'&gt;&lt;tr&gt;&lt;th  class="t"&gt;<span class="hl_1">　　</span>TH<span class="hl_1">　　</span>&lt;/th&gt;&lt;td  class="t"&gt;<span class="hl_1">　　</span>TD<span class="hl_1">　　</span>&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;

&lt;a href="#" style="background:cyan; zoom:1;" class="t"&gt;<span class="hl_1">　　</span>A<span class="hl_1">　　</span>&lt;/a&gt;

&lt;button class="t"&gt;&lt;span style="background:pink;"&gt;<span class="hl_1">　　</span>BUTTON<span class="hl_1">　　</span>&lt;/span&gt;&lt;/button&gt;

&lt;span style="background:gold; display:inline-block;" class="t"&gt;<span class="hl_1">　　</span>SPAN<span class="hl_1">　　</span>&lt;/span&gt;

&lt;span style="background:yellow; overflow:hidden;" class="t"&gt;<span class="hl_1">　　</span>SPAN<span class="hl_1">　　</span>&lt;/span&gt;

&lt;span style="background:gray; width:50px; height:50px;" class="t"&gt;<span class="hl_1">　　</span>SPAN<span class="hl_1">　　</span>&lt;/span&gt;

&lt;div style="background:silver; width:90px;" class="t"&gt;<span class="hl_1">　　</span>DIV<span class="hl_1">　　</span>&lt;/div&gt;

&lt;div style="background:red; float:left;" class="t"&gt;<span class="hl_1">　　</span>FLOAT DIV<span class="hl_1">　　</span>&lt;/div&gt;

&lt;div style="background:yellowgreen; float:right;" class="t"&gt;<span class="hl_1">　　</span>FLOAT DIV<span class="hl_1">　　</span>&lt;/div&gt;

&lt;div style="background:lightblue; position:absolute; top:0; left:0;" class="t"&gt;<span class="hl_1">　　</span>POS DIV<span class="hl_1">　　</span>&lt;/div&gt;

&lt;script&gt;
    var t = document.getElementsByTagName("*");
    var w = [];
    var has = "";
    var a = "";
    for (var i = 0, j = t.length; i &lt; j; i++) {
        if (t[i].className == "t") {
            w.push(t[i]);
        }
    }
    for (var i = 0, j = w.length; i &lt; j; i++) {
        a = w[i].innerHTML;
        has = ((w[i].currentStyle == undefined) || (w[i].currentStyle.hasLayout == undefined)) ? "_N/A_" : ((w[i].currentStyle.hasLayout) ? "_yes_" : " _no__");
        w[i].innerHTML = a.replace(/　　/, "　　　(" + has + ")");
    }
&lt;/script&gt;
&lt;/body&gt;</pre>
      <p>以上代码分别测试了表格、块级元素、行内元素、浮动的元素、绝对定位的元素、按钮元素标签内包含全角空格的情况，标签内的文字均为“<span class="hl_1">　　</span>[Some text]<span class="hl_1">　　</span>”，即两个全角空格与一些字符及两个全角空格。<br />
      遍历了文档树内的所有元素，并筛选出 class 属性为“t”的元素，检测其是否是否含有 currentStyle 对象并且 currentStyle.hasLayout 是否为“真”，为真则显示“(true)”，为否则显示“(false)”，hasLayou 属性无效则显示“(N/A)”。</p>
      <p>代码在各浏览器中效果如下：</p>
      <table class="compare">
        <tr>
          <th>IE6(Q) IE7(Q) IE8(Q)</th>
          <td><img src="../../tests/BT1025/a.gif" alt="" /></td>
        </tr>
        <tr>
          <th>IE6(S) IE7(S)</th>
          <td><img src="../../tests/BT1025/b.gif" alt="" /></td>
        </tr>
        <tr>
          <th>IE8(S)</th>
          <td><img src="../../tests/BT1025/c.gif" alt="" /></td>
        </tr>
        <tr>
          <th>Firefox
            Chrome
            Safari
            Opera</th>
          <td><img src="../../tests/BT1025/d.gif" alt="" /></td>
        </tr>
      </table>
      <ul>
        <li>在 <em>IE6(Q)、IE7(Q)、IE8(Q)</em> 中，出现以下情况时，元素的内容文字尾部的所有全角空格都会被忽略：<br />
          1. 表格的单元格元素；<br />
          2. “zoom”的计算值不为 normal 的元素；<br />
          3. 设置了“display:inline-block”的元素；<br />
          4. 设置了宽度或高度的块级元素；<br />
          5. 设置了宽度或高度的行内元素；<br />
          6. 设置了浮动特性的元素；<br />
          7. 设置了绝对定位的元素；<br />
          8. 按钮元素；<br />
          9. 此外还有 'writing-mode' 特性为 'tb-rl'的元素。</li>
        <li>在 <em>IE6(S)、IE7(S)</em> 中，当出现上面的情况 1、2、3、4、6、7、8 时，元素的内容文字尾部的所有全角空格被忽略；</li>
        <li>在 <em>IE8(S)</em> 中，出现上面的情况 1、3、4、6、7、8 时，元素的内容文字尾部的所有全角空格被忽略；</li>
        <li>在 <em>其他非 IE 浏览器</em> 中，全角空格按照普通的全角字符处理。</li>
      </ul>
      <p>通过对元素 hasLayout 特性的判断不难发现，上述发生全角空格被忽略的元素都是在该浏览器中触发了 hasLayout 的元素。<br />
      即当元素触发当前的 IE 浏览器的 hasLayout 后，其内容文字尾部的所有全角空格被忽略。</p>

      <h2 id="solutions">解决方案</h2>
      <p>避免使用全角空格占位，使用“&amp;nbsp;”代替全角空格。</p>

      <h2 id="see_also">参见</h2>
      <h3>知识库</h3>
      <ul class="see_also">
        <li><a href="#">...</a></li>
      </ul>

      <h3>相关问题</h3>
      <ul class="see_also">
        <li><a href="#">...</a></li>
      </ul>

      <div class="appendix">
        <h2>测试环境</h2>
        <table class="list">
          <tr>
            <th>操作系统版本:</th>
            <td>Windows 7 Ultimate build 7600</td>
          </tr>
          <tr>
            <th>浏览器版本:</th>
            <td>IE6<br />
              IE7<br />
              IE8<br />
              Firefox 3.6.2<br />
              Chrome 5.0.356.2 dev<br />
              Safari 4.0.5<br />
              Opera 10.51
          </tr>
          <tr>
            <th>测试页面:</th>
            <td><a href="../../tests/BT1025/fullwidth_space.html">fullwidth_space.html</a></td>
          </tr>
          <tr>
            <th>本文更新时间:</th>
            <td>2010-07-15</td>
          </tr>
        </table>

        <h2>关键字</h2>  
        <!-- keywords begin -->
        <p>space full-width 全角 字符 hasLayout</p>
        <!-- keywords end -->
      </div>
      <!-- content end -->
    </div>
  </div>
</div>
</body>
</html>
